<template>
	<div class="addressList">
		<Header></Header>
		<van-address-list
			v-model="chosenAddressId"
			:list="list"
			default-tag-text="默认"
			@add="onAdd"
			@edit="onEdit"
			@select="changeAddress"
		/>
		<van-button type="danger" size="mini" v-if="index" @click="del(index)"
			>删除</van-button
		>
		<!-- 修改界面 -->
		<div class="updata" v-if="isupdata">
			<van-address-edit
				:area-list="areaList"
				show-postal
				:show-delete="showDelete"
				:address-info="addressInfo"
				show-set-default
				show-search-result
				:search-result="searchResult"
				:area-columns-placeholder="['请选择', '请选择', '请选择']"
				@save="onSave"
				@delete="onDelete"
			/>
			<van-button type="primary" size="mini" @click="quxiao">取消</van-button>
		</div>
	</div>
</template>

<script>
import Header from "@/components/header";
import { reqAddressList, reqAddressDel, reqAddressUpdata } from "@/api/address";
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
export default {
	data() {
		return {
			chosenAddressId: "",
			showDelete: false,
			list: [],
			index: "",
			isupdata: "",
			addressInfo: {},
			areaList,
			searchResult: [],
		};
	},
	computed: {},
	watch: {},

	methods: {
		// 获取地址列表
		async getAddressList() {
			let params = {
				per: 10,
				page: 1,
			};
			const res = await reqAddressList({ page: 1 });
			console.log(res);
			// 遍历地址数组
			res.addresses.forEach((item, index) => {
				// 将list展示数组push进去需要的东西
				this.list.push({
					id: item._id,
					name: item.receiver,
					tel: item.mobile,
					address: item.regions + item.address,
					isDefault: item.isDefault,
				});
				if (item.isDefault) {
					// 判断如果为true的时候，设置这个id为默认地址。
					this.chosenAddressId = item._id;
				}
			});
		},

		// 通过切换地址的时候触发的事件。api文档
		changeAddress(item, index) {
			console.log(item, index);
			//将index赋值。
			this.index = item.id;
		},
		onAdd() {
			Toast("新增地址");
			// 跳转到address页面
			this.$router.push("/address");
		},
		onEdit(item, index) {
			Toast("编辑地址:" + index);
			console.log(item);
			this.isupdata = true;
			// 点击让这个修改显示，将item
			this.addressInfo = item;
		},

		// 点击删除  点击按钮的时候，将data中的index给事件作为参数。因为上面
		// index赋值的就是id
		async del(id) {
			console.log(id);
			const res = await reqAddressDel(id);
			console.log(res);
			// 删除之后，将list里面对应的id删除
			this.list.some((item, index) => {
				if (item.id == id) {
					this.list.splice(index, 1);
					this.index = "";
				}
			});
		},

		// 点击取消
		quxiao() {
			this.isupdata = false;
		},

		// 点击修改页面的保存的时候，获取表单的内容content
		async onSave(content) {
			Toast("save");
			console.log(content);
			// 调用修改按钮
			const data = {
				receiver: content.name,
				mobile: content.tel,
				regions: content.province + content.city + content.county,
				address: content.addressDetail,
				isDefault: content.isDefault,
			};
			// 调用修改接口
			const res = await reqAddressUpdata(content.id, data);
			console.log(res);
		},
		onDelete() {
			Toast("delete");
		},
		onChangeDetail(val) {
			if (val) {
				this.searchResult = [
					{
						name: "黄龙万科中心",
						address: "杭州市西湖区",
					},
				];
			} else {
				this.searchResult = [];
			}
		},
	},
	created() {
		// 调用获取地址列表方法;
		this.getAddressList();
	},
	mounted() {},
	components: {
		Header,
	},
};
</script>
<style scoped>
.van-address-list__bottom {
	margin-bottom: 50px;
}
.addressList {
	position: relative;
}
.updata {
	width: 100%;
	height: 500px;
	background-color: aqua;
	position: absolute;
	left: 0;
	top: 0;
}
</style>
